<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>椅子信息</title>
        <link rel="stylesheet" href="../layui/css/layui.css">
    </head>
    <style>
        .searchForm {
            margin-top: 8px;
        }

        .layui-form-label {
            padding: 9px 8px;
        }

        .layui-btn {
            margin-left: 10px;
        }

    </style>
    <body>

        <!--头部工具栏中的删除选中按钮-->
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="delSelected">删除选中</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
                <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
            </div>
        </script>

        <!-- 搜索表单 -->
        <form class="layui-form searchForm">

            <!-- 编号搜索 -->
            <div class="layui-inline">
                <label class="layui-form-label">编号</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="searchId" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 责任人搜索 -->
            <div class="layui-inline">
                <label class="layui-form-label">责任人</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="resName" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 使用者搜索 -->
            <div class="layui-inline">
                <label class="layui-form-label">使用者</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="userName" autocomplete="off" class="layui-input">
                </div>
            </div>
            <!-- 购买日期区间搜索 -->
            <div class="layui-inline">
                <label class="layui-form-label">日期范围</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="startDay" placeholder="起始日期yyyy-MM-dd">
                </div>
                <!--<label class="layui-form-label">购买日期</label>-->
                <!--<div class="layui-input-inline" style="width: 100px;">-->
                <!--    <input type="text" name="startDay" placeholder="" autocomplete="off" class="layui-input">-->
                <!--</div>-->
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="endDay" placeholder="结束日期yyyy-MM-dd">
                </div>
                <!--<div class="layui-input-inline" style="width: 100px;">-->
                <!--    <input type="text" name="endDay"  结束日期autocomplete="off" class="layui-input">-->
                <!--</div>-->
            </div>
            <!-- 购买金额范围区间 -->
            <div class="layui-inline">
                <label class="layui-form-label">金额范围</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="beginPrice" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="endPrice" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
            </div>

            <!-- 使用者搜索 -->
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal " lay-submit
                            lay-filter="search">搜索
                    </button>
                </div>
            </div>
            <!-- 使用者搜索 -->
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm">重置
                    </button>
                </div>
            </div>

        </form>


        <!-- 数据表格 -->
        <table id="dataTable" lay-filter="tab"></table>

        <!--<div class="layui-upload">-->
        <!--    <button type="button" class="layui-btn" id="upTa">上传图片</button>-->
        <!--    <div class="layui-upload-list">-->
        <!--        <img class="layui-upload-img" id="imgTa">-->
        <!--        <p id="pTa"></p>-->
        <!--    </div>-->
        <!--</div>-->

        <!--<script>-->
        <!--    layui.use('upload', function () {-->
        <!--        var $ = layui.jquery-->
        <!--            , upload = layui.upload;-->

        <!--        //普通图片上传-->
        <!--        var uploadInst = upload.render({-->
        <!--            elem: '#upTa'-->
        <!--            , url: 'file/upload' //改成您自己的上传接口-->
        <!--            , before: function (obj) {-->
        <!--                //预读本地文件示例，不支持ie8-->
        <!--                obj.preview(function (index, file, result) {-->
        <!--                    $('#imgTa').attr('src', result); //图片链接（base64）-->
        <!--                });-->
        <!--            }-->
        <!--            , done: function (res) {-->
        <!--                //如果上传失败-->
        <!--                if (res.code > 0) {-->
        <!--                    return layer.msg('上传失败');-->
        <!--                }-->
        <!--                //上传成功-->
        <!--            }-->
        <!--            , error: function () {-->
        <!--                //演示失败状态，并实现重传-->
        <!--                var pTa = $('#pTa');-->
        <!--                pTa.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');-->
        <!--                pTa.find('.demo-reload').on('click', function () {-->
        <!--                    uploadInst.upload();-->
        <!--                });-->
        <!--            }-->
        <!--        });-->
        <!--    });-->
        <!--</script>-->
        <script>
            // 读取日期插件
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                //常规用法
                laydate.render({
                    elem: 'input[name=startDay]'
                });  //常规用法
                laydate.render({
                    elem: 'input[name=endDay]'
                });
                laydate.render({
                    elem: 'input[name=editDay]'
                });
            });

            //表格渲染
            layui.use(['table', 'form', 'upload'], function () {
                var table = layui.table;
                var form = layui.form;
                var upload = layui.upload;

                //第一个实例
                table.render({
                    id: 'queryReload'
                    , elem: '#dataTable'
                    , height: 600
                    , url: 'chair/query' //数据接口
                    , toolbar: '#toolbarDemo' //头部工具
                    , page: true //开启分页
                    , cols: [[ //表头
                        {checkbox: true, fixed: true}
                        , {field: 'chId', title: '编号', width: 80, sort: true, fixed: 'left', align: 'center'}
                        , {
                            field: 'tName', title: '责任人', width: 150, templet: function (d) {
                                return d.teacher.tName
                            }, align: 'center'
                        }
                        , {
                            field: 'sName', title: '使用者', width: 150, sort: true, templet: function (d) {
                                return d.student.sName
                            }, align: 'center'
                        }
                        , {field: 'chDate', title: '购买日期', width: 177, align: 'center'}
                        , {field: 'chPrice', title: '购买金额', width: 177, align: 'center'}
                        , {fixed: 'right', width: 250, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                    ]]
                });

                //监听提交
                form.on('submit(search)', function (data) {
                    //表格重载
                    table.reload('queryReload', {
                        where: data.field
                        //     {
                        //     searchId: searchId.val(),
                        //     resName: resName.val(),
                        //     userName: userName.val(),
                        //     startDay: startDay.val(),
                        //     endDay: endDay.val(),
                        //     beginPrice: beginPrice.val(),
                        //     endPrice: endPrice.val()
                        // }
                        , page: {
                            curr: 1,//重新从第 1 页开始
                        }
                    })
                    return false;
                });

                //监听行工具事件
                table.on('tool(tab)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                    var indexData = obj.data; //获得当前行数据
                    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

                    if (layEvent === 'edit') { //编辑
                        layer.open({
                            area: '800px'
                            , title: '修改信息'
                            // 弹出层编辑表单
                            , content: '<form class="layui-form editForm">\n' +
                                '\n' +
                                '    <div class="layui-form-item">\n' +
                                '        <label class="layui-form-label">编号</label>\n' +
                                '        <div class="layui-input-block">\n' +
                                '            <input type="text" name="editId" value="' + indexData.chId + '" placeholder="当前编号： ' + indexData.chId + '  "\n' +
                                '                   autocomplete="off"\n' +
                                '                   class="layui-input " readonly>\n' +
                                '            <div class="layui-form-mid layui-word-aux">编号由系统自动生成,禁止修改!!!!</div>\n' +
                                '        </div>\n' +
                                '    </div>\n' +
                                '\n' +
                                ' <div class="layui-form-item">\n' +
                                '    <label class="layui-form-label">责任人选择</label>\n' +
                                '    <div class="layui-input-block">\n' +
                                '      <select id="editResOpt" name="editResId" lay-verify="required">\n' +
                                ' <option value="">当前责任人:' + indexData.teacher.tName + '</option>\n' +
                                '      </select>\n' +
                                '    </div>\n' +
                                '  </div>\n' +
                                '\n' +
                                ' <div class="layui-form-item">\n' +
                                '    <label class="layui-form-label">使用者选择</label>\n' +
                                '    <div class="layui-input-block">\n' +
                                '      <select id="editUserOpt" name="editUserId" lay-verify="required">\n' +
                                ' <option value="">当前使用者:' + indexData.student.sName + '</option>\n' +
                                '      </select>\n' +
                                '    </div>\n' +
                                '  </div>\n' +
                                '\n' +
                                '    <div class="layui-form-item">\n' +
                                '        <label class="layui-form-label">购买日期</label>\n' +
                                '        <div class="layui-input-block">\n' +
                                '            <input type="text" name="editDay" required lay-verify="required"\n' +
                                '                   placeholder="当前日期：' + indexData.chDate + '        ----tip:日期格式：yyyy-MM-dd" autocomplete="off"\n' +
                                '                   class="layui-input">\n' +
                                '        </div>\n' +
                                '    </div>\n' +
                                '\n' +
                                '    <div class="layui-form-item">\n' +
                                '        <label class="layui-form-label">购买金额</label>\n' +
                                '        <div class="layui-input-block">\n' +
                                '            <input type="text" name="editPrice" required lay-verify="required"\n' +
                                '                   placeholder="当前购买金额：' + indexData.chPrice + '" autocomplete="off"\n' +
                                '                   class="layui-input">\n' +
                                '        </div>\n' +
                                '    </div>\n' +
                                '</form>',
                            btn: ['提交修改', '取消'],
                            success: function (layero, index) {

                                //渲染编辑页面的日期控件
                                layui.use('laydate', function () {
                                    var laydate = layui.laydate;
                                    laydate.render({
                                        elem: 'input[name=editDay]'
                                    });
                                });


                                // 将保存按钮改变成提交按钮
                                layero.find('.layui-layer-btn0').attr({
                                    'lay-filter': 'subEdit',
                                    'lay-submit': '',
                                });

                                // // 表单验证
                                // form.verify({
                                //     roleName: function (value, item) {
                                //         if (!new RegExp("^[a-zA-Z0-9_|\u4e00-\u9fa5\]{2,10}$")
                                //             .test(value)) {
                                //             return '角色名必须为2-10位且不能有特殊字符';
                                //         }
                                //     },
                                //     roleDesc: function (value, item) {
                                //         if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\]{2,200}$")
                                //             .test(value)) {
                                //             return '角色描述必须为2-200位且不能有特殊字符';
                                //         }
                                //     }
                                // });


                                //打开弹出层时获取到所有的学生和教师的的数据
                                $.ajax({
                                    url: 'student/getAllStudent?page=1&limit=1000',
                                    type: "get",
                                    //此处返回的_data是一个JSON格式的字符串并非是JSON数据 所以需要指定拿到的数据格式
                                    dataType: 'json',
                                    success: function (_data) {
                                        //转换数据格式为JSON格式
                                        // JSON.parse(_data)

                                        $.each(_data.data, function (index, item) {
                                            $("#editUserOpt").append('<option value="' + item.sId + '">' + item.sName + '</option>');
                                        })
                                        //重新渲染选择下拉框 否则不显示
                                        layui.form.render('select');
                                    }
                                })

                                // 刷新渲染(否则开关按钮会不显示)
                                form.render();

                            },
                            //设定确定后的方法
                            yes: function (index, layero) {
                                // 监听提交按钮
                                form.on('submit(subEdit)', function (data) {
                                    var formData = $(".editForm").serialize();
                                    $.ajax({
                                        type: "get",
                                        url: 'chair/edit',
                                        data: formData,
                                        dataType: 'json',
                                        success: function (_data) {

                                            if (_data == 1) {
                                                layer.open({
                                                    title: '修改结果'
                                                    , content: '修改数据成功',
                                                });
                                            } else {
                                                layer.open({
                                                    title: '修改结果'
                                                    , content: '修改失败',
                                                });
                                            }

                                            layer.close(index); // 关闭弹出层

                                            //重新渲染数据表格 否则不会实时更新表内数据
                                            table.reload('queryReload', {
                                                page: {
                                                    curr: 1,//重新从第 1 页开始
                                                }
                                            })
                                        }
                                    });

                                });
                            },
                            btn2: function (index, layero) { // 取消按钮回调函数
                                layer.close(index); // 关闭弹出层
                            }
                        });

                        // //同步更新缓存对应的值
                        // obj.update({
                        //     username: '123'
                        //     , title: 'xxx'
                        // });

                    } else if (layEvent === 'del') { //删除
                        layer.confirm('真的删除行么', function (index) {
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存

                            layer.close(index); // 关闭弹出层

                            // alert(indexData.chId)
                            //向服务端发送删除指令
                            delResult(indexData);
                        });

                    } else if (layEvent === 'thingImage') {    //上传图片
                        //图片上传
                        layer.open({
                            area: ['800px', '800px']
                            , title: '上传实物图片'
                            // 弹出层编辑表单
                            , content: $(".up").removeClass("layui-hide")
                            ,
                            success: function (layero, index) {
                                //将弹出层阴影调到上层
                                $(".layui-layer-shade").appendTo(layero.parent());

                                //普通图片上传
                                var retry = upload.render({
                                    elem: '#choose'
                                    , method: 'post'
                                    , accept: 'image'
                                    , url: 'file/upload' //改成您自己的上传接口
                                    , data: {chId: indexData.chId}
                                    , before: function (obj) {
                                        //预读本地文件示例，不支持ie8
                                        obj.preview(function (index, file, result) {
                                            $('#demo1').attr('src', result); //图片链接（base64）

                                        });
                                    }
                                    , done: function (res) {
                                        //如果上传失败
                                        if (res.code > 0) {
                                            return layer.msg('上传失败');
                                        } else if (res.data.num == 1) {
                                            return layer.msg('上传成功');
                                        }
                                        //上传成功
                                        // //重新渲染数据表格 否则阴影就会一直在
                                        // table.reload('queryReload', {
                                        //     page: {
                                        //         curr: 1,//重新从第 1 页开始
                                        //     }
                                        // })
                                    }
                                    , error: function () {
                                        //演示失败状态，并实现重传
                                        var demoText = $('#demoText');
                                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                                        demoText.find('.demo-reload').on('click', function () {
                                            retry.upload();
                                        });
                                    }
                                });


                                //打开弹出层时获取到已经存在的照片
                                /*$.ajax({
                                    url: 'student/getAllStudent?page=1&limit=1000',
                                    type: "get",
                                    //此处返回的_data是一个JSON格式的字符串并非是JSON数据 所以需要指定拿到的数据格式
                                    dataType: 'json',
                                    success: function (_data) {
                                        //转换数据格式为JSON格式
                                        // JSON.parse(_data)

                                        $.each(_data.data, function (index, item) {
                                            $("#editUserOpt").append('<option value="' + item.sId + '">' + item.sName + '</option>');
                                        })
                                        //重新渲染选择下拉框 否则不显示
                                        layui.form.render('select');
                                    }
                                })*/

                                // 刷新渲染????
                                // form.render();

                            },

                        });

                    }

                });


                //监听头部工具事件  用于批量删除
                table.on('toolbar(tab)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'delSelected':
                            var data = checkStatus.data;
                            delResult(data)
                            //表格重载
                            table.reload('queryReload', {
                                page: {
                                    curr: 1,//重新从第 1 页开始
                                }
                            })
                            break;
                        case 'getCheckLength':
                            var data = checkStatus.data;
                            layer.msg('选中了：' + data.length + ' 个');
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选' : '未全选');
                            break;
                    }
                    ;
                });

                //传输List达到删除一个或批量的方法
                function delResult(data) {
                    var _list = {};
                    if (!data.length) {
                        _list["chId[" + 0 + "]"] = data.chId;

                    } else if (data.length > 0) {

                        for (var i = 0; i < data.length; i++) {
                            // _list["后台controller中的接收名|字[" + i + "]"] = 值; //设置对象的key=>value键值对，即类似于a[0]=0的内容塞入对象_list中，对于后台接收来说，就相当于List内容了
                            _list["chId[" + i + "]"] = data[i].chId;
                        }

                    }
                    $.ajax({
                        url: 'chair/del',
                        data: _list,
                        success: function (_data) {

                            if (_data >= 1) {
                                layer.open({
                                    title: '删除结果'
                                    , content: '删除' + _data + '条数据成功',
                                });
                            } else {
                                layer.open({
                                    title: '删除结果'
                                    , content: '删除失败',
                                });
                            }
                            layer.close(index)
                        }
                    })
                }
            })


        </script>

        <!--定义表格内按钮-->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="thingImage">上传实物图片</a>
        </script>
    </body>

    <div class="layui-upload layui-hide up">
        <button type="button" class="layui-btn" id="choose">上传图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
            <p id="demoText"></p>
        </div>
    </div>
</html>